<!--社区首页-->
<style scoped>
body {
  margin: 0 auto;
  padding: 0;
}

/*走马灯效果*/
.el-carousel__item img {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

#sy {
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #ffffff;
  background-color: #282C30;
  width: 1200px;
  height: 60px;
  margin: auto;
  text-align: center;
  overflow: hidden;
  border-radius: 10px;
}

#sy > p {

  margin: 0;
  padding: 5px;
}

.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}

.layout-main {
  padding: 0;
}


.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 250px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.date {
  font-size: 12px;
  color: #aCacCb;
}
.bodyDiv {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>

<template>
  <div class="bodyDiv">
    <!--  轮播图-->
    <div style="margin: 0 0 15px 0">
      <template>
        <div>
          <el-carousel height="375px" style="width: 1200px; margin: 0 auto;display:block;">
            <el-carousel-item v-for="sli in SlideshowArr">
              <img :src="require('../img/admin/'+sli.photo)" style="width: 100%;height: 100%"/>
            </el-carousel-item>
          </el-carousel>
        </div>
      </template>
    </div>

    <div style="width: 100%;height: auto;padding: 0;overflow: hidden;margin: -10px 0 0;">
      <div id="sy">
        <p>HOME NEWS</p>
        <p>社区公告</p>
      </div>
      <el-main style="width: 1200px;margin: 0 auto ;padding:0; overflow: hidden;">
        <el-row>
          <el-col :span="span" style="float: left; margin: 5px 0;" v-for="n in noticeArr">
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
              <img :src="n.photo<1?'':require('../img/admin/'+n.photo)"
                   class="image" style="display: inline-block;" :alt="n.photo<1?'未发表图片':'加载失败'">
              <div style="padding: 14px;">
                <span
                    style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:1;word-wrap: break-word;">
                  {{ n.title }}
                </span>
                <div class="bottom clearfix">
                  <span class="date">{{ n.noticeCreate }}</span>
                  <el-button @click="openNoticeStandard(n)" type="text" class="button">查看全文<i
                      class="el-icon-arrow-right"></i></el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="block" align="center" style="margin-top: 10px;margin-bottom: 15px">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="this.totalCount">
          </el-pagination>
        </div>

        <!--    公告详情弹框    -->
        <el-dialog :visible.sync="StandardVisible" width="1000px">
          <div align="center" style="">
            <h1 style="margin:0 auto;font-size: 30px">{{ noticeStandard.title }}</h1>
            <span style="margin-right: 20px">发布人：{{ noticeStandard.admName }}</span>
            <span>{{ noticeStandard.noticeCreate }}</span>
            <pre align="left" style="white-space: pre-line; font-size: 20px;margin: 15px auto">{{
                noticeStandard.content
              }}</pre>
            <img v-show="noticeStandard.photo<1?false:true"
                 :src="noticeStandard.photo<1||noticeStandard.photo==null?'':require('../img/admin/'+noticeStandard.photo)"
                 alt="加载失败" style="width: 600px;height: 350px;">
            <br>
            <br>
            <span>最近更新时间：{{ noticeStandard.noticeModified }}</span>
          </div>
        </el-dialog>
      </el-main>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      StandardVisible: false,
      noticeStandard: {},
      /*轮播图数组*/
      SlideshowArr: [],

      //公告数组
      noticeArr: [],
      totalCount: 0,
      pageSize: 8,
      page: 1,
      span: 6
    };
  },
  methods: {
    //展示轮播图列表
    loadSlideshowList() {
      let url = 'http://localhost:8080/slideshow/list';
      console.log('首页轮播图展示请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.SlideshowArr = responseBody.data;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-left'
          });
        }
      })
    },

    //展示公告详情和打开详情弹框
    openNoticeStandard(notice) {
      let url = 'http://localhost:8080/notice/' + notice.id + '/UserNoticeStandard';
      console.log('公告详情请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.StandardVisible = true;
          this.noticeStandard = responseBody.data;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-left'
          });
          this.loadNoticeList();
        }
      })
    },

    //展示公告列表
    loadNoticeList() {
      let url = 'http://localhost:8080/notice/' + this.page + '/' + this.pageSize + '/userNoticeList';
      console.log('首页公告展示请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.noticeArr = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loadNoticeList();
      console.log(`当前页: ${val}`);
    },
  },
  mounted() {
    this.loadNoticeList();
    this.loadSlideshowList();
  }
}
</script>